<template>
  <div class="konw_content">
    <div class="top">
      <p class="title1" v-if="!isEdit">{{ content.title }}</p>
      <van-field v-else v-model="form.title" placeholder="请输入" />
      <div class="info">
        <van-image
          round
          fit="cover"
          class="info_img"
          width="28"
          height="28"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/github.svg"
        >
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
        <p class="txt">
          {{ content.updateUserName || content.createUserName }}于{{
            content.updateTime
          }}更新
        </p>
      </div>
    </div>
    <div class="main">
      <div v-if="!isEdit" v-html="content.content"></div>
      <div v-else ref="divRef" id="aiEditor">
        <div class="aie-container">
          <div class="aie-container-header"></div>
          <div class="aie-container-main"></div>
          <div class="aie-container-footer"></div>
        </div>
      </div>
    </div>
    <div class="btns">
      <van-button type="warning" @click="handleback">返回 </van-button>
      <van-button type="primary" @click="handleSave" v-if="isEdit">保存 </van-button>
    </div>
  </div>
</template>

<script setup>
import { AiEditor } from 'aieditor';
import 'aieditor/dist/style.css';
import { onMounted, onUnmounted, ref, reactive } from 'vue';

const divRef = ref();
let aiEditor = null;
const props = defineProps({
  content: {
    type: Object,
    default: () => {
      return {};
    },
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
});
const form = reactive({
  id: props.content.id,
  title: props.content.title,
  content: props.content.content,
});
onMounted(() => {
  if (props.isEdit) {
    form.id = props.content.id;
    form.title = props.content.title;
    form.content = props.content.content;
    aiEditor = new AiEditor({
      element: '#aiEditor',
      placeholder: '点击输入内容...',
      content: form.content || '',
      onChange: (aiEditor) => {
        form.content = aiEditor.getHtml() || '';
      },
    });
  }
});
onUnmounted(() => {
  aiEditor && aiEditor.destroy();
});

const emit = defineEmits(['handleSave', 'handleback']);

function resetForm() {
  form.id = '';
  form.title = '';
  form.content = '';
}
function handleback() {
  resetForm();
  emit('handleback');
}

function handleSave() {
  emit('handleSave', form);
}
</script>

<style scoped lang="scss">
.konw_content {
  padding: 20px 15px;
  width: 100%;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;

  .top {
    width: 100%;
    height: 100px;
    padding: 16px 18px;
    box-sizing: border-box;
    background: rgba(10, 146, 254, 0.1);

    .title1 {
      font-size: 16px;
      color: #333333;
      height: 36px;
    }
    .info {
      display: flex;
      justify-content: start;
      gap: 0 10px;
    }
  }

  .main {
    margin-top: 15px;
    padding: 0;
    width: 100%;
    height: calc(100vh - 280px);
    overflow-y: auto;
    overflow-wrap: break-word;
  }
  #aiEditor {
    height: calc(100vh - 380px);
    overflow-y: auto;
  }
  .btns {
    position: relative;
    bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 32px;
  }

  .aie-container-footer {
    display: none;
  }
}
</style>
